HTML 元素：change 事件

#HTML 元素：change 事件| 来源: 网络整理| 查看: 265

HTML 元素：change 事件

当用户更改、和元素的值时，change 事件在这些元素上触发。和 input 事件不同的是，并不是每次元素的 value 改变时都会触发 change 事件。

基于表单元素的类型和用户对元素的操作的不同，change 事件触发的时机也不同：

当元素被选中或取消选中时（通过点击或使用键盘）；当元素被选中时（但不是取消选中时）；当用户显式提交改变时（例如：通过鼠标点击了中的一个下拉选项，通过元素选择了一个日期，通过元素上传了一个文件等）；当标签的值被修改并且失去焦点后，但未提交时（例如：对、 text、search、url、tel、email 或 password 类型的元素进行编辑后）。

HTML 标准列出了应该触发 change 事件的类型。

语法

在方法（如 addEventListener()）中使用事件的名称，或设置事件处理器属性。

jsaddEventListener("change", (event) => {}); onchange = (event) => {}; 事件类型

通用 Event。

示例元素HTML html 选择一种冰淇淋口味：选择一个... 巧克力沙丁鱼香草 body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } JavaScript jsconst selectElement = document.querySelector(".ice-cream"); selectElement.addEventListener("change", (event) => { const result = document.querySelector(".result"); result.textContent = `你喜欢 ${event.target.value}`; }); 结果文本输入元素

对于像这样的元素，change 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字，然后点击输入框外的地方来触发事件。

HTML html JavaScript jsconst input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("change", updateValue); function updateValue(e) { log.textContent = e.target.value; } 结果规范SpecificationHTML Standard # event-changeHTML Standard # handler-onchange浏览器兼容性

BCD tables only load in the browser

对于一些特定类型的交互是否要触发 change 事件，不同浏览器的意见并不总是一致的。例如，在 Gecko 的元素中使用键盘导航，除非用户按下 Enter 键或将焦点从上移走（参见 Firefox bug 126379），否则不会触发 change 事件。但从 Firefox 63（Quantum）开始，这个行为在已经在主流浏览器中达成一致。

【本文地址】

公司简介

联系我们